<template>
  <div id="bookcaselist">
<!--    <v-head :title="title" :showBack="showBack"></v-head>-->
    <div id="content">
      <p @click="changeTheme('theme1')"></p>
      <p @click="changeTheme('theme2')"></p>
      <p @click="changeTheme('theme3')"></p>
    </div>
    <div class="testColorChange"></div>
<!--    <v-foot :activeIndex="3"></v-foot>-->
  </div>
</template>
<script>
export default {
  name: 'mine',
  data () {
    return {
      title: '我的',
      showBack: false
    }
  },
  methods: {
    changeTheme (theme) {
      window.document.documentElement.setAttribute('data-theme', theme)
    }
    
  },
  components: {
  }
}
</script>
<style scoped lang="scss">
@import "./../style/mixin";
@import "./../style/base";
@import "./../style/variable";
.bookcaselist{
  height: 100px;
}
.testColorChange{
  height: 100px;
  @include bg_color($background-color-theme);
}
p{
  @include px2rem(width,100px);
  @include px2rem(height,100px);
  @include px2rem(margin,20px);
  float:left;
}
p:first-child{
  background-color:red;
}
p:nth-child(2){
  background-color:#652BF5;
}
p:last-child{
  background-color:deepskyblue;
}
</style>